<template>
  <view class="area-management-container">
    <!-- 页面头部 -->
    <view class="header">
      <view class="header-left" @click="goBack">
        <u-icon name="arrow-left" size="20" color="#333"></u-icon>
      </view>
      <view class="header-title">区域管理</view>
      <view class="header-right" @click="goToAreaAdd">
        <u-icon name="plus" size="20" color="#007aff"></u-icon>
      </view>
    </view>

    <!-- 搜索筛选区域 -->
    <view class="search-container">
      <view class="search-row">
        <u-input 
          v-model="searchForm.areaName" 
          placeholder="请输入区域名称"
          :clearable="true"
          @confirm="handleSearch"
          class="search-input"
        />
        <button class="search-btn" @click="handleSearch">搜索</button>
      </view>
      <view class="filter-row">
        <u-select
          v-model="searchForm.areaType"
          :list="areaTypeOptions"
          placeholder="区域类型"
          @change="handleSearch"
          class="filter-select"
        />
        <u-select
          v-model="searchForm.status"
          :list="statusOptions"
          placeholder="状态"
          @change="handleSearch"
          class="filter-select"
        />
      </view>
    </view>

    <!-- 区域列表 -->
    <view class="area-list">
      <view v-if="loading" class="loading-container">
        <u-loading-icon mode="spinner"></u-loading-icon>
        <text class="loading-text">正在加载...</text>
      </view>
      
      <view v-else-if="areaList.length === 0" class="empty-container">
        <view class="empty-icon">📋</view>
        <view class="empty-text">暂无区域数据</view>
        <button class="empty-btn" @click="goToAreaAdd">新增区域</button>
      </view>
      
      <view v-else class="area-items">
        <view 
          v-for="area in areaList" 
          :key="area.id" 
          class="area-item"
          @click="goToAreaDetail(area.id)"
        >
          <view class="area-info">
            <view class="area-name">{{ area.areaName }}</view>
            <view class="area-type">{{ area.areaType }}</view>
            <view class="area-location" v-if="area.location">{{ area.location }}</view>
          </view>
          <view class="area-status">
            <view class="status-badge" :class="getStatusClass(area.status)">
              {{ getStatusText(area.status) }}
            </view>
            <view class="area-frequency" v-if="area.frequency">{{ area.frequency }}</view>
          </view>
          <view class="area-arrow">
            <u-icon name="arrow-right" size="16" color="#ccc"></u-icon>
          </view>
        </view>
      </view>
    </view>

    <!-- 加载更多 -->
    <view v-if="hasMore && !loading" class="load-more">
      <text class="load-more-text">上拉显示更多</text>
    </view>
    
    <!-- 没有更多数据 -->
    <view v-else-if="!hasMore && areaList.length > 0" class="load-more">
      <text class="load-more-text">没有更多数据了</text>
    </view>
  </view>
</template>

<script>
import { getCleaningAreaPage } from '@/api/cleaning'

export default {
  name: 'AreaManagement',
  data() {
    return {
      loading: false,
      hasMore: true,
      pageNum: 1,
      pageSize: 10,
      searchForm: {
        areaName: '',
        areaType: '',
        status: ''
      },
      areaList: [],
      areaTypeOptions: [
        { label: '全部类型', value: '' },
        { label: '大厅', value: '大厅' },
        { label: '走廊', value: '走廊' },
        { label: '楼梯', value: '楼梯' },
        { label: '电梯', value: '电梯' },
        { label: '卫生间', value: '卫生间' },
        { label: '办公室', value: '办公室' },
        { label: '会议室', value: '会议室' },
        { label: '停车场', value: '停车场' },
        { label: '其他', value: '其他' }
      ],
      statusOptions: [
        { label: '全部状态', value: '' },
        { label: '启用', value: 1 },
        { label: '禁用', value: 0 }
      ]
    }
  },
  onLoad() {
    this.loadAreaList()
  },
  onPullDownRefresh() {
    this.refreshData()
  },
  onReachBottom() {
    this.loadMore()
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },

    // 跳转到新增页面
    goToAreaAdd() {
      uni.navigateTo({
        url: '/pages/property-work/cleaning-management/area-add'
      })
    },

    // 跳转到详情页面
    goToAreaDetail(areaId) {
      uni.navigateTo({
        url: `/pages/property-work/cleaning-management/area-detail?id=${areaId}`
      })
    },

    // 搜索
    handleSearch() {
      this.pageNum = 1
      this.hasMore = true
      this.loadAreaList()
    },

    // 刷新数据
    async refreshData() {
      this.pageNum = 1
      this.hasMore = true
      await this.loadAreaList()
      uni.stopPullDownRefresh()
    },

    // 加载更多
    async loadMore() {
      if (!this.hasMore || this.loading) return
      this.pageNum++
      await this.loadAreaList()
    },

    // 加载区域列表
    async loadAreaList() {
      if (this.loading) return
      
      try {
        this.loading = true
        
        const params = {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          areaName: this.searchForm.areaName || undefined,
          areaType: this.searchForm.areaType || undefined,
          status: this.searchForm.status !== '' ? this.searchForm.status : undefined
        }

        const response = await getCleaningAreaPage(params)
        
        if (response.success && response.data) {
          if (this.pageNum === 1) {
            this.areaList = response.data.records || []
          } else {
            this.areaList.push(...(response.data.records || []))
          }
          
          // 判断是否还有更多数据
          this.hasMore = this.areaList.length < response.data.total
        } else {
          uni.showToast({
            title: response.message || '加载失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('加载区域列表失败:', error)
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },

    // 获取状态样式类
    getStatusClass(status) {
      return status === 1 ? 'status-enabled' : 'status-disabled'
    },

    // 获取状态文本
    getStatusText(status) {
      return status === 1 ? '启用' : '禁用'
    }
  }
}
</script>

<style lang="scss" scoped>
.area-management-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 16px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  z-index: 100;

  .header-left {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .header-title {
    flex: 1;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: #333;
  }

  .header-right {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.search-container {
  padding: 16px;
  background-color: #fff;
  margin-bottom: 8px;

  .search-row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;

    .search-input {
      flex: 1;
      margin-right: 12px;
    }

    .search-btn {
      width: 60px;
      height: 36px;
      background-color: #007aff;
      color: #fff;
      border: none;
      border-radius: 6px;
      font-size: 14px;
    }
  }

  .filter-row {
    display: flex;
    gap: 12px;

    .filter-select {
      flex: 1;
    }
  }
}

.area-list {
  .loading-container {
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    
    .loading-text {
      font-size: 14px;
      color: #999;
    }
  }

  .empty-container {
    padding: 60px 20px;
    text-align: center;

    .empty-icon {
      font-size: 48px;
      margin-bottom: 16px;
    }

    .empty-text {
      font-size: 16px;
      color: #999;
      margin-bottom: 20px;
    }

    .empty-btn {
      width: 120px;
      height: 36px;
      background-color: #007aff;
      color: #fff;
      border: none;
      border-radius: 18px;
      font-size: 14px;
    }
  }

  .area-items {
    .area-item {
      display: flex;
      align-items: center;
      padding: 16px;
      background-color: #fff;
      margin-bottom: 1px;
      border-bottom: 1px solid #f0f0f0;

      .area-info {
        flex: 1;
        min-width: 0;

        .area-name {
          font-size: 16px;
          font-weight: 500;
          color: #333;
          margin-bottom: 4px;
        }

        .area-type {
          font-size: 14px;
          color: #666;
          margin-bottom: 2px;
        }

        .area-location {
          font-size: 12px;
          color: #999;
        }
      }

      .area-status {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        margin-right: 8px;

        .status-badge {
          padding: 2px 8px;
          border-radius: 10px;
          font-size: 12px;
          margin-bottom: 4px;

          &.status-enabled {
            background-color: #e8f5e8;
            color: #52c41a;
          }

          &.status-disabled {
            background-color: #fff2e8;
            color: #fa8c16;
          }
        }

        .area-frequency {
          font-size: 12px;
          color: #999;
        }
      }

      .area-arrow {
        width: 20px;
        display: flex;
        justify-content: center;
      }
    }
  }
}

.load-more {
  padding: 20px;
  text-align: center;
  
  .load-more-text {
    font-size: 14px;
    color: #999;
  }
}

// 表单项样式调整
.search-input {
  border-radius: 6px;
}

.filter-select {
  border-radius: 6px;
}
</style>